<template>
	<view class="g-bd">
		<view class="m-box f-zfs30">
			<view class="f-fw800 f-zfs34">有效时间（小时）</view>
			<view class="m-time">
				<view class="u-btn-box f-mtb">
					<view class="u-btn-txt" @click="reduction(code)" :disabled="code <= 1">-</view>
				</view>
				<view class="u-ipt-box f-mtb">
					<input class="u-ipt-r f-zfs28" type="text" :value="code" @blur="getCode" maxlength="3" />
				</view>
				<view class="u-btn-box f-mtb">
					<view class="u-btn-txt" @click="add(code)">+</view>
				</view>
			</view>
			<view class="u-btn-box">
				<view class="u-btn-txt" @click="createCode">生成访客码</view>
			</view>

			<view class="u-vc">
				<view>访客码为：{{visitorCode}}</view>
				<view class="u-btn-box f-mtb">
					<view class="u-btn-txt" @click="copyCode">复制</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HOME from '@/api/home/index.js'
	let app = getApp();

	export default {
		data() {
			return {
				code: 1,
				form: {
					address_id: '',
					expire: '',
					face_id: ''
				},
				visitorCode: 123456
			}
		},
		methods: {
			getCode(e) {
				var self = this;
				if (e.detail.value >= 1) {
					self.code = e.detail.value;
				} else {
					uni.showToast({
						title: '请输入大于0的数字',
						duration: 2000,
						icon: "none"
					});
				}
			},
			reduction(val) {
				var self = this;
				val--;
				self.code = val;
			},
			add(val) {
				var self = this;
				val++;
				self.code = val;
			},
			// 生成访客码
			createCode() {
				this.form = {
					address_id: app.globalData.intoRentAddressId,
					expire: this.code,
					face_id: app.globalData.intoFaceId
				}
				HOME.passCode(this.form).then(res => {

				})
			},
			// 复制访客码
			copyCode() {
				uni.setClipboardData({
					data: this.visitorCode,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				});
			}
		}

	}
</script>

<style scoped lang="scss">
	.m-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;

		margin-top: 30rpx;
		color: #2A9F93;


		.m-time {
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-sizing: border-box;

			margin: 30rpx 0;
		}
		
		.u-vc {
			display: flex;
			align-items: center;
			margin: 30rpx 0;
		}
	}
</style>
